// var list=document.querySelectorAll('.l');
//获取页面中第一个类为'.Main'的元素 即最外圈的ul
var list=document.querySelector('.Main');
//获取最外的ul中的子元素, 即4个li
var lists=list.children;
//为每个li添加方法
for(var i=0;i<lists.length;i++){
    //添加鼠标移入最外的ul时触发
    lists[i].onmouseenter=function(){
        //为每个li中的子元素，即<a>和(li中的)<ul>
        //下标0是<a>,下标1是<ul>,所以用1代表选中ul
            this.style.backgroundColor='gray';
            this.children[1].style.display="block";
            for(var j=0;j<3;j++){
                this.children[1].children[j].onmouseenter=function(){
                    this.style.backgroundColor='gray';
                }
            }
            for(var k=0;k<3;k++){
                this.children[1].children[k].onmouseleave=function(){
                    this.style.backgroundColor='white';
                }
            }
            // for(var j=0;j<lists.children.length;j++){
            //     this.children[i].children[i].style.backgroundColor='red';
            // }

    }
    //鼠标移出则隐藏
    lists[i].onmouseleave=function(){
        this.style.backgroundColor='white';
        this.children[1].style.display="none";
    }
}

// this.children[1].style.backgroundColor='gray';